<template>
    <el-container>
<!--        <el-header>-->
<!--            <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0d73bd">-->
<!--                <tr>-->
<!--                    <td width="269"><img height="65" src="@/assets/img/pic_top_01.gif" width="269"></td>-->
<!--                    <td width="484" align="right"><font color="#000099"><img src="@/assets/img/044.gif" width="466" height="54">&nbsp;</font></td>-->
<!--                </tr>-->
<!--            </table>-->
<!--        </el-header>-->
      <el-image :src="src" :fit="fill" style="height: 180px ;width: 770px;align-self: center;margin: 0px 0px 5px 0px" >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
<!--      <nav-component style="align-self: center;width: 770px"></nav-component>-->
        <el-main>
            <p style="display: inline;margin-left: 600px">
                <a href="/" style="text-decoration: none;color: black">首页</a> >> 正文
            </p>
            <table width="760" border="0" cellspacing="0" cellpadding="0" align="center" height="1">
                <tr><td bgcolor="#CCCCCC"></td></tr>
            </table>
            <br>

            <div style="height: 510px;overflow-y: auto">
<!--            <div>-->
                <!-- 新闻标题 -->
                <h2>{{ blog.title }}</h2>
                <!-- 新闻时间、作者 -->
                <span>时间：{{ blog.updateTime }} 浏览量：{{ blog.view }}</span>
                <!-- 新闻正文 -->
                <div v-html="blog.content" style="padding: 0 10px;margin-top: 20px;margin-left: 300px;width: 750px;"></div>
            </div>

        </el-main>

<!--        <el-footer style="position: fixed;bottom: 0; width:100%">-->
        <el-footer>
            <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="30">
                <tr>
                    <td bgcolor="#5E739D" valign="middle">
                        <div align="center">
                            <span>
                                <font color="#000000">
                                    <a href="/login"><font color="#66FF33">管理维护</font></a>
                                    &nbsp;©Copyright 2022-2023<b>&nbsp;刘德华的博客</b>&nbsp;all right reserved
                                </font>
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </el-footer>
    </el-container>
</template>

<script>
// import NavComponent from "@/components/Nav.vue"
    export default {
        name: "NewsDetail",
      components:{
          // NavComponent
      },
        data() {
            return {
                blog:{},
              src:"https://s1.ax1x.com/2023/07/06/pC6UGX8.jpg",
            }
        },
        methods: {
            getBlogById(id){
              this.$axios.get("/tbBlog/getById?id="+id).then((res)=>{
                this.blog = res.data.data
              })
              this.$axios.get("/tbBlog/addView?id="+id).then((res)=>{
                console.log("view+1")
                console.log(res.data)
              })
            },
          // addView(){
          //
          // }
        },
        mounted() {
          // 获取路由参数
          const blogId = this.$route.params.id;
          // 根据路由参数获取博客文章数据（示例）
          // 可以根据实际情况从后端或其他数据源获取数据
          this.blog = this.getBlogById(blogId);
          // this.addView();
          // console.log(res.data)

        }
    }
</script>

<style scoped>
    .editor-content-view {
        border: 3px solid #ccc;
        border-radius: 5px;
        padding: 0 10px;
        margin-top: 20px;
        overflow-x: auto;
    }

    .editor-content-view p,
    .editor-content-view li {
        white-space: pre-wrap; /* 保留空格 */
    }

    .editor-content-view blockquote {
        border-left: 8px solid #d0e5f2;
        padding: 10px 10px;
        margin: 10px 0;
        background-color: #f1f1f1;
    }

    .editor-content-view code {
        font-family: monospace;
        background-color: #eee;
        padding: 3px;
        border-radius: 3px;
    }
    .editor-content-view pre>code {
        display: block;
        padding: 10px;
    }

    .editor-content-view table {
        border-collapse: collapse;
    }
    .editor-content-view td,
    .editor-content-view th {
        border: 1px solid #ccc;
        min-width: 50px;
        height: 20px;
    }
    .editor-content-view th {
        background-color: #f1f1f1;
    }

    .editor-content-view ul,
    .editor-content-view ol {
        padding-left: 20px;
    }

    .editor-content-view input[type="checkbox"] {
        margin-right: 5px;
    }
</style>
